import React, { Component } from "react"
import {
    View,
    Image,
    StyleSheet,
    Text,
    TextInput, 
    TouchableOpacity, 
    Keyboard, 
    ScrollView,
    StatusBar,
    Linking,
    Alert
} from "react-native"
import navigationhelper from 'src/components/navigationhelper'
import {checkPhone, deviceHeight, deviceWidth} from "src/util"
import Layer from "../../components/Layer"
import {inject} from "mobx-react/native"
import { scaleSize } from 'src/utils/ScreenUtils'
import StorageDatas from '../../utils/storageDatas'
import { Flex } from '@ant-design/react-native';

@inject('userAuth')
export default class Login extends Component {
    constructor(props) {
        super(props)
        this.state = {
            showPhoneVerified: false,
            isShowPassword: false
        }

    }
    onBlur = () => {
        this.setState({
            focus: undefined
        })
    }

    onChangeText = (text, type) => {
        switch (type) {
            case 'phone': {
                this.phone = text
                this.setState({
                    showPhoneVerified: checkPhone(text)
                })
            }
            default: {
                this[type] = text
            }
        }
    }

    doLogin = () => {
        if(!this.phone){
            return Layer.showMsg('手机号不能为空')
        }
        if(!this.password){
            return Layer.showMsg('密码不能为空')
        } 
        if(!this.state.showPhoneVerified){
            return Layer.showMsg('手机号不正确')
        }
        //去验证
        this.props.userAuth.Login({
            mobile: this.phone,
            password: this.password
        }).then(() => {
            Layer.showMsg('登录成功')
            navigationhelper.push('Tab')
            let dict = {'userAccount':this.phone,'passAccount':this.password}
            StorageDatas.saveLocalStorage('userAccount',dict);
        }).catch((error) => {
          if(error.message == 'Network request failed'){
                Alert.alert('网络出错', '请先检查您的网络设置?', [
                {
                    text: '是', onPress: () => {
                        Linking.openURL('app-settings:').catch(err => console.log('error', err))
                    }
                },
                { text: '否', onPress: () => { }},
            ])
        }
        else{
            Layer.showMsg(error.message)
        }
        })
    }

    render() {
        return (
            <TouchableOpacity activeOpacity={1} onPress={() => {
                Keyboard.dismiss()
            }}>
                <StatusBar hidden={true}/>
                <ScrollView style={{backgroundColor:'#fff',paddingTop: deviceHeight * 0.15, paddingBottom: scaleSize(40)}}>
                <Text style={{marginLeft:deviceWidth*0.5-30,fontSize:26,fontWeight:'bold',color:'#2E2E2E'}}>登 录</Text>
                    <View style={styles.container}>
                        <Text style={styles.phone}>手机号</Text>
                        <View style={styles.icon}>
                            <TextInput
                                style={styles.input}
                                placeholder="请输入手机号"
                                keyboardType="number-pad"
                                onFocus={() => {
                                    this.setState({
                                        focus: 'phoneInput'
                                    })
                                }}
                                onBlur={this.onBlur}
                                onChangeText={(text) => {
                                    this.onChangeText(text, 'phone')
                                }}/>
                            {this.state.showPhoneVerified && <Image source={require('src/assets/login/gou.png')}/>}
                        </View>
                        <RenderLine type="phoneInput" state={this.state}/>
                        <Text style={styles.password}>密码</Text>
                        <View style={styles.icon}>
                            <TextInput
                                style={styles.input}
                                placeholder="请输入6-12位字符"
                                placeholderTextColor='#E4E4E4'
                                onFocus={() => {
                                    this.setState({
                                        focus: 'passwordInput'
                                    })
                                }}
                                secureTextEntry={!this.state.isShowPassword}
                                onBlur={this.onBlur}
                                onChangeText={(text) => {
                                    this.onChangeText(text, 'password')
                                }}/>
                            <TouchableOpacity onPress={()=>{
                                this.setState({
                                    isShowPassword: !this.state.isShowPassword
                                })
                            }}>
                                {this.state.isShowPassword ?
                                    <Image source={require('src/assets/login/zhenyan.png')}/> :
                                    <Image source={require('src/assets/login/biyan.png')}/>}
                            </TouchableOpacity>
                        </View>
                        <RenderLine type="passwordInput" state={this.state}/>
                        <View style={{marginTop: 5, display: 'flex', flexDirection: 'row'}}>
                            <View style={{flex: 1}}/>
                            <Flex style={{paddingHorizontal:20,paddingVertical:20}} onPress={() => {
                                navigationhelper.navigate('FindPassword')
                            }}>
                                <Text style={styles.forgetPassword}>忘记密码?</Text>
                             </Flex>
                        </View>
                        <View style={{display: 'flex', justifyContent: 'center', alignItems: 'center', marginTop: -20}}>
                        <TouchableOpacity
                            style={styles.loginButton}
                            onPress={this.doLogin}
                        >
                            <Text style={styles.loginButtonText}>登   录</Text>
                        </TouchableOpacity>

                        <View style={{flexDirection:'row',justifyContent:'center',alignItems:'center',marginTop:34}}>
                        <Text style={{color:'#999999',fontSize:14}}>还没有账号?</Text>
                        <TouchableOpacity onPress={() => {
                            navigationhelper.navigate('Regist')
                        }}>
                            <Text style={styles.registButton}>  注册</Text>
                        </TouchableOpacity>
                        </View>
                    </View>
                    </View>
                   
                </ScrollView>
            </TouchableOpacity>
        )
    }
}

function RenderLine (props) {
    var color = '#E4E4E4'
    if (props.type === props.state.focus) {
        color = '#EF3C3C'
    }
    return (
        <View style={{backgroundColor: color, height: 2, marginTop: 5}} />
    )
}

const styles = StyleSheet.create({
    container: {
        marginTop:20,
        marginLeft: 25,
        height:  deviceHeight * 0.85,
        marginRight: 25,
        display: 'flex',
        flexDirection: 'column',
        backgroundColor: 'white',
        borderRadius: 10,
        paddingTop: 24,
        paddingLeft: 18,
        paddingRight: 18
    },
    login: {
        fontSize: 20,
        lineHeight: 28,
        color: '#2E2E2E',
        fontFamily: 'PingFang SC'
    },
    phone: {
        fontSize: 14,
        lineHeight: 17,
        marginTop: 10,
        color: '#8E8E93',
        fontFamily: 'PingFang SC'
    },
    password: {
        fontSize: 14,
        lineHeight: 17,
        marginTop: 60,
        color: '#8E8E93',
        fontFamily: 'PingFang SC'
    },
    input: {
        flex: 1,
        fontSize: 14,
        height:20,
        paddingTop: 0,
        paddingBottom: 0,
        color: '#2e2e2e'
    },
    forgetPassword: {
        fontSize: 13,
        color: '#EF3C3C',
        fontFamily: 'PingFang SC'
    },
    loginButton: {
        marginTop:100,
        backgroundColor: '#EF3C3C',
        width: 229,
        height: 50,
        borderRadius: 10,
        justifyContent: 'center',
        alignItems: 'center'
    },
    loginButtonText: {
        color: 'white',
        fontSize: 16,
        fontFamily: 'PingFang SC'
    },
    icon: {
        // height: 16,
        marginTop: 15,
        display: 'flex',
        flexDirection: 'row',
        alignItems: 'center'
    },
    registButton: {
        color: '#EF3C3C',
        fontSize: 14,
    }

})